import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router'
import {get_add_shopcar,pro_order_list} from '../../actions';
import {getHosImg,getDocImg,getServImg} from '../../actions/ActionTypes';
import 'whatwg-fetch';

const user_dele = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/user_dele.png');
const duihao = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/duihao.png');


let mydefault = React.createClass({
  componentDidMount:function(){
    const {dispatch} = this.props;
    dispatch(get_add_shopcar(this.props.userId));
    let user_shop_list = this.props.user_shop_list || [],
        checkedArr = this.props.checkedArr || [],
        userId = this.props.userId || 0,
        _this = this;

// (user_phone,cart_id,user_id,item_price,item_num,item_id,hospital_id,doctor_id,item_name,order_from,item_image)
    $('.fix_total a').click(function(){
      let myconfig = [];
      user_shop_list.forEach(function(item,index){
        if(_this.in_array(index,checkedArr)){
          // console.log(item.cartId);
          let config_arr = {
            "cart_id":item.cartId,
            "user_id":item.userId,
            "item_price":item.price,
            "item_num":item.itemNum,
            "item_id":item.itemId,
            "hospital_id":item.hospitalId,
            "doctor_id":item.doctorId,
            "item_name":item.itemName,
            "order_from":'1',
            "item_image":item.itemImage
          };
          myconfig.push(config_arr)
          let query = item.cartId;
          fetch("http://120.27.37.54/mall/cart/"+query, {
            method: "DELETE",
            headers: {
              "Content-Type": "application/form-data"
            },
            body: ''
          }).then(function(res) {
            if (res.ok) {
              // console.log("删除成功");
              dispatch(get_add_shopcar(_this.props.userId));
              return res.json();
            } else if (res.status == 401) {
              console.log("Oops! You are not authorized.");
            }
          }, function(e) {
            console.log("Error submitting form!");
          })
        }
      })
      pro_order_list(_this.props.userTel,myconfig);
    });
  },
  componentDidUpdate:function(){
    this.get_total();
  },
  in_array(search,array){
      for(var i in array){
          if(array[i]==search){
              return true;
          }
      }
      return false;
  },
  get_total:function(){
    this.props.total = 0;
    let that= this;
    $('.item_wrapper .item').each(function(){
      that.props.total += $(this).find('.price').text() * $(this).find('.num font').text();
    });
    $('.fix_total .total_price').text(that.props.total)
  },
  render:function(){
    // console.log(this.props.user_shop_list);
    let user_shop_list = this.props.user_shop_list,
        checkedArr = this.props.checkedArr || [],
        _this = this;
        console.log(user_shop_list)
    return(
      <div className="u_shop_car confirm_order">
        <div className="item_wrapper">
          {
            user_shop_list.map(function(item,index){
              // console.log(_this.in_array(index,checkedArr));
              let imgSrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId)
                if(_this.in_array(index,checkedArr)){
                  return(
                    <div className="item border_b1">
                      <div className="wrapper clearfix">
                        <h4>{item.itemName}·隆鼻·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/><br/>
                            包含：???
                          </div>
                        </div>
                        <h5>预约金：¥ <font className="price">{item.price}</font>.00</h5>
                        <div className="num">x<font>{item.itemNum}</font></div>
                      </div>
                    </div>
                  )
                }
            })
          }

          <div className="connect border_b1"><span>手机号码</span><span>{_this.props.userTel}</span></div>
        </div>

        <div className="fix_total border_t1 box">
          <div className="top">
            <span><var></var>合计：¥ <font className="total_price">0</font>.00</span>
          </div>
          <a href="javascript:void(0)">确认订单</a>

        </div>
      </div>
    )
  }
})

let mapStateToProps = (state) => {
  let userId = state.user.userId || 0,
      userTel = state.user.userTel || '',
      checkedArr = state.user.checkedArr || [],
      user_shop_list = state.user.user_shop_list || [];
      console.log(user_shop_list)
  // console.log(state)
  return{
    userId,
    checkedArr,
    userTel,
    total:0,
    user_shop_list
  }
}

export default connect(mapStateToProps)(mydefault);
